import React from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';
const scale = GLOBAL.SCALE;
/**
 * 
 * @param {Object} props leftText,rightText
 */
export function StockTop (props) {
	const { leftText, rightText } = props;
	return (
		<View style={styles.stockTop}>
			<View style={styles.stockTopHead}></View>
			<View style={styles.stockTopContent}>
				<Text style={styles.text}>{leftText}</Text>
				<Text style={[styles.text, styles.textSuccess]}>{rightText}</Text>
			</View>
		</View>
	);
}

/**
 * 
 * @param {Object} props height{number},strList{array}
 */
export function StockRow (props) {
	const { height, strList } = props;
	const heightStyle = height ? { height: height * scale } : null;
	const views = strList.map(str => {
		return (
			<View style={styles.stockRowItem}>
				<Text style={styles.text}>{str}</Text>
			</View>
		);
	});
	return (
		<View style={[styles.stockRow, heightStyle, ...props.style]}>{views}</View>
	);
}

export function StockBottomBtn (props) {
	return (
		<View style={styles.bottomBtnCell}>
			<TouchableOpacity style={styles.bottomBtn} onPress={props.onPress} activeOpacity={0.5} >
				<Text style={styles.bottomBtnText}>提交</Text>
			</TouchableOpacity>
		</View>
	);
}

const styles = StyleSheet.create({
	stockRow: {
		flexDirection: 'row',
		paddingLeft: 12 * scale,
	},
	stockRowItem: {
		flex: 1,
		justifyContent: 'center',
	},
	stockTop: {
		height: 75 * scale,
		width: 375 * scale,
		backgroundColor: '#fff',
		alignItems: 'center',
	},
	stockTopHead: {
		height: 50 * scale,
		width: 375 * scale,
		backgroundColor: style.color.themeColor,
	},
	stockTopContent: {
		height: 50 * scale,
		width: 351 * scale,
		backgroundColor: '#fff',
		shadowColor: '#D2D2D2',
		shadowOffset: { width: 0, height: 2 * scale },
		shadowRadius: 4 * scale,
		shadowOpacity: 0.5,
		borderRadius: 8,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale,
		top: -25 * scale,
	},
	text: {
		fontSize: 13 * scale,
		color: '#404040'
	},
	textSuccess: {
		color: style.color.themeColor,
	},
	bottomBtnCell: {
		justifyContent: 'center',
		alignItems: 'center',
		width: 375 * scale,
		height: 60 * scale,
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
		// position: 'absolute',
		// left: 0,
		// bottom: 0,
	},
	bottomBtn: {
		width: 345 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 20,
	},
	bottomBtnText: {
		fontSize: 18 * scale,
		color: '#fff'
	},
});